import React from "react";
import 'video.js/dist/video-js.min.css'
// @ts-ignore
import videojs from 'video.js';


interface HlsProps {
  videoId: string
  videoRef: string
  videoUrl: string
}

export class Hls extends React.Component<HlsProps, {}> {

  private player?: {};

  render() {
    return <div>
      <video id={this.props.videoId}
             ref={this.props.videoRef}
             className="video-js"
             controls={true}
             autoPlay={true}
      />
    </div>
  }

  componentDidMount() {
    this.player = videojs(this.props.videoId, {
      fluid: true,
    });
    // @ts-ignore
    this.player.src({
      src: this.props.videoUrl,
      type: 'application/x-mpegURL',
      withCredentials: false
    });
  }

  componentWillUnmount() {
    if (this.player !== undefined) {
      // @ts-ignore
      this.player.dispose();
    }
  }
}
